<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>account</title>

    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">

    <script src="./jquery/dist/jquery.min.js"></script>

    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>


    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>

</head>

<body>

<div class="container" id="accountApp">


    <div class="main" v-show="display == 'main'">

        <!-- search form  -->
        <div class="card">
            <!-- <div class="card-header">
                        Header
                    </div> -->
            <div class="card-body">
                <form class="form-inline">

                    <div class="form-group">
                        <label for="">日期</label>
                        <input type="date" name=""  class="form-control" placeholder="" aria-describedby="helpId">
                    </div>
                    <div class="form-group">
                        <label for="">价格</label>
                        <input type="number" name=""  class="form-control" placeholder="" aria-describedby="helpId">
                    </div>
                    <button type="button" class="btn btn-primary">search</button>
                </form>
            </div>
            <div class="card-footer text-muted">
                <button type="button" class="btn btn-success" @click="fnAccountModal">add</button>
            </div>
        </div>



        <div class="grid">


            <template v-for="(item, index) in dataList" :key="index">
                <div class="card" style="margin:10px auto;">

                    <div class="card-body">
                        <h4 class="card-title">{{item.accountDate | fmtDate }}</h4>
                        <p><span class="badge badge-info">{{item.tags}}</span></p>
                        <p v-show="item.money" class="text-primary"> {{item.money}} 元</p>

                        <p class="card-text"><span class="text-muted"> {{item.note}} </span></p>
                        <p>{{item.cdate}} </p>
                        <button type="button" class="btn  btn-primary" @click="fnShowEditModal(item)">edit</button>
                        <button type="button" class="btn  btn-danger" @click="fnShowDeleteModal(item)">del</button>
                        <!--<a href="#" class="card-link">Another link</a>-->
                    </div>
                </div>
            </template>


        </div>

    </div>



    <div class="detail" style="margin:10px auto;" v-show="display =='detail'">



        <div class="card">
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @click="fnBack2Main">取消</button>
                <button type="button" class="btn btn-primary" @click="fnSave">保存</button>
            </div>


            <div class="card-body">

                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#basic">基本信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#others">其他信息</a>
                    </li>
                </ul>

                <div class="tab-content">

                    <div id="basic" class="container tab-pane active">
                        <form >
                            <div class="form-group" v-show="false">
                                <label for="">sid</label>
                                <input type="text" v-model="accountForm.sid" class="form-control" placeholder=""
                                       aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">tags</label>
                                <input type="text" v-model="accountForm.tags" class="form-control" placeholder="">
                                <small  class="text-muted">多个请用逗号分开   美容,王山水,打折</small>

                            </div>
                            <div class="form-group">
                                <label for="">日期</label>
                                <input type="date" v-model="accountForm.accountDate" class="form-control" placeholder=""
                                       aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">金额</label>
                                <input type="number" v-model="accountForm.money" class="form-control" placeholder=""
                                       aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">内容</label>
                                <textarea class="form-control" v-model="accountForm.note" rows="5"></textarea>
                            </div>

                        </form>
                    </div>

                    <div id="others" class="container tab-pane fade">

                       <p> 其他信息 form </p>

                    </div>

                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @click="fnBack2Main">取消</button>
                <button type="button" class="btn btn-primary" @click="fnSave">保存</button>
            </div>
        </div>


    </div>





    <!-- delete confirm 模态框 -->
    <div class="modal fade" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">提示</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">

                    确定要删除吗?
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">no</button>
                    <button type="button" class="btn btn-primary" @click="fnDelete()" >yes</button>
                </div>

            </div>
        </div>
    </div>

</div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#accountApp',
        data: {

            tip: 'ok',
            display: 'main',
            total: 0,
            page: 1,

            //search form
            accountSearchForm: {
                cateId: '',
                sname: '',
            },

            dataList: [

                {
                    cdate: '2019-02-12',
                    userPin: '200800',
                    note: '美容化妆品一套',
                    money: 860,
                    accountDate: '2019-02-10'

                },


            ],

            //data form
            accountForm: {

            },

            deleteId: '',



        },

        computed: {

            pages() {
                return Math.ceil(this.total / 10);
            }
        },

        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //新增 article modal
            fnAccountModal() {
                // $('#accountModal').modal('show');
                this.accountForm = {
                   // accountDate: new Date()
                };
                this.display = 'detail';
            },

            fnBack2Main() {
                // $('#accountModal').modal('show');
                this.display = 'main';
            },

            //新增
            fnClear() {

            },


            // to edit modal
            fnShowEditModal(item){

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../accounts/" + item.sid,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);
                            _self.accountForm = response.dat;
                            _self.display = 'detail';
                        }

                    }
                });
            },

            //修改 item
            fnSave() {


                var _self = this;

                var postUrl = './accounts';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.accountForm),
                    dataType: "json",
                     contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                         if (response.code == 0) {

                           _self.accountForm = response.dat;
                           _self.queryAccountList();
                           _self.fnBack2Main();
                         }

                    }
                });
            },


            fnShowDeleteModal(item){

                this.deleteId = item.sid;
                $('#deleteModal').modal('show');
            },


            fnDelete(){

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: "../accounts/" + _self.deleteId,

                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.queryAccountList();
                            $('#deleteModal').modal('hide');
                        }

                    }
                });


            },



            // 查询 cate
            queryAccountList() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../accounts?sort=accountDate,desc&sort=udate,desc",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);
                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },



        },
        mounted() {

             this.queryAccountList();
        }
    })


</script>